<template>
  <div>
    <!--面包屑模块-->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 10px">
      <el-breadcrumb-item :to="{ path: '/manage/' + this.id }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>视频教学</el-breadcrumb-item>
      <el-breadcrumb-item>观看视频</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card class="video-card">
      <div v-if="currentVideo">
        <h1 class="video-title">{{ currentVideo.title }}</h1>
        <div class="video-info">
          <span>上传时间: {{ currentVideo.uploadDate }}</span>
          <span>时长: {{ currentVideo.duration }}</span>
          <span>上传者: {{ currentVideo.uploadBy }}</span>
        </div>
        <div class="video-description">
          <p>{{ currentVideo.description }}</p>
        </div>
        
        <div class="video-player-container">
          <!-- 简单的视频播放器，在实际项目中可能需要使用更高级的视频播放组件 -->
          <video 
            class="video-player" 
            controls 
            autoplay
            ref="videoPlayer"
            :src="currentVideo.url"
            @timeupdate="updateProgress"
            @ended="videoEnded">
            您的浏览器不支持 HTML5 视频播放
          </video>
        </div>

        <div class="video-progress">
          <el-progress 
            :percentage="progressPercentage" 
            :format="progressFormat"
            :stroke-width="18"
            status="success">
          </el-progress>
        </div>

        <div class="video-notes">
          <h3>学习笔记</h3>
          <el-input
            type="textarea"
            :rows="4"
            placeholder="在这里记录你的学习心得..."
            v-model="notes">
          </el-input>
          <div class="notes-actions">
            <el-button type="primary" size="small" @click="saveNotes">保存笔记</el-button>
          </div>
        </div>
      </div>
      
      <div v-else class="no-video">
        <h2>未选择视频</h2>
        <p>请从视频列表中选择一个视频观看</p>
        <el-button type="primary" @click="goToVideoList">返回视频列表</el-button>
      </div>
    </el-card>

    <!-- 相关视频推荐 -->
    <el-card class="related-videos" v-if="currentVideo">
      <div slot="header">
        <span>相关视频推荐</span>
      </div>
      <div class="related-videos-list">
        <el-row :gutter="20">
          <el-col :span="8" v-for="video in relatedVideos" :key="video.id">
            <el-card shadow="hover" class="related-video-item" @click.native="watchVideo(video)">
              <div class="related-video-thumb">
                <!-- 这里可以放视频缩略图 -->
                <i class="el-icon-video-camera"></i>
              </div>
              <div class="related-video-info">
                <h4>{{ video.title }}</h4>
                <p>{{ video.duration }} | {{ video.uploadDate }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'VideoWatch',
  data() {
    return {
      id: null,
      currentVideo: null,
      progressPercentage: 0,
      notes: '',
      // 相关视频推荐（模拟数据）
      relatedVideos: [
        {
          id: 4,
          title: '循环神经网络与自然语言处理',
          description: '讲解RNN在NLP中的应用',
          uploadDate: '2025-03-15',
          duration: '48:15',
          uploadBy: 'teacher001',
          url: 'https://example.com/videos/rnn_nlp.mp4'
        },
        {
          id: 5,
          title: '生成对抗网络原理',
          description: '深入浅出讲解GAN的原理和应用',
          uploadDate: '2025-03-18',
          duration: '56:40',
          uploadBy: 'teacher002',
          url: 'https://example.com/videos/gan_explained.mp4'
        },
        {
          id: 6,
          title: '强化学习基础',
          description: '强化学习的基础理论和应用场景',
          uploadDate: '2025-03-20',
          duration: '51:22',
          uploadBy: 'teacher001',
          url: 'https://example.com/videos/reinforcement_learning.mp4'
        }
      ]
    }
  },
  created() {
    this.id = parseInt(this.$route.params.id)
    
    // 从 sessionStorage 获取当前视频信息
    const videoJson = window.sessionStorage.getItem('currentVideo')
    if (videoJson) {
      this.currentVideo = JSON.parse(videoJson)
      
      // 从本地存储加载笔记
      this.loadNotes()
    }
  },
  methods: {
    // 更新进度条
    updateProgress() {
      if (this.$refs.videoPlayer) {
        const player = this.$refs.videoPlayer
        this.progressPercentage = (player.currentTime / player.duration) * 100
      }
    },
    // 进度条格式化
    progressFormat(percentage) {
      if (this.$refs.videoPlayer) {
        const player = this.$refs.videoPlayer
        const currentMinutes = Math.floor(player.currentTime / 60)
        const currentSeconds = Math.floor(player.currentTime % 60)
        const totalMinutes = Math.floor(player.duration / 60)
        const totalSeconds = Math.floor(player.duration % 60)
        
        return `${currentMinutes}:${currentSeconds < 10 ? '0' : ''}${currentSeconds} / ${totalMinutes}:${totalSeconds < 10 ? '0' : ''}${totalSeconds}`
      }
      return '0:00 / 0:00'
    },
    // 视频播放结束
    videoEnded() {
      this.$message.success('视频播放完成')
      // 可以在这里记录学习进度等信息
    },
    // 保存笔记
    saveNotes() {
      if (!this.currentVideo) return
      
      // 保存到本地存储
      localStorage.setItem(`video_notes_${this.currentVideo.id}`, this.notes)
      this.$message.success('笔记已保存')
      
      // 在实际项目中，可能需要保存到服务器
      /*
      try {
        await this.$http.post('/video/saveNotes', {
          videoId: this.currentVideo.id,
          userId: window.sessionStorage.getItem('userId'),
          notes: this.notes
        })
        this.$message.success('笔记已保存')
      } catch (error) {
        console.error('保存笔记失败', error)
        this.$message.error('保存笔记失败')
      }
      */
    },
    // 加载笔记
    loadNotes() {
      if (!this.currentVideo) return
      
      // 从本地存储加载
      const savedNotes = localStorage.getItem(`video_notes_${this.currentVideo.id}`)
      if (savedNotes) {
        this.notes = savedNotes
      }
      
      // 在实际项目中，可能需要从服务器加载
      /*
      try {
        const { data: res } = await this.$http.get('/video/getNotes', {
          params: {
            videoId: this.currentVideo.id,
            userId: window.sessionStorage.getItem('userId')
          }
        })
        if (res.code === 200 && res.data) {
          this.notes = res.data.notes
        }
      } catch (error) {
        console.error('获取笔记失败', error)
      }
      */
    },
    // 前往视频列表
    goToVideoList() {
      this.$router.push('/manage/' + this.id + '/video/list')
    },
    // 观看相关视频
    watchVideo(video) {
      // 更新当前视频
      this.currentVideo = video
      window.sessionStorage.setItem('currentVideo', JSON.stringify(video))
      
      // 重置进度
      this.progressPercentage = 0
      
      // 加载新视频的笔记
      this.loadNotes()
      
      // 如果需要，可以在这里加载新视频的播放记录等信息
    }
  }
}
</script>

<style scoped>
.video-card {
  margin-bottom: 20px;
}

.video-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.video-info {
  display: flex;
  color: #606266;
  font-size: 14px;
  margin-bottom: 15px;
}

.video-info span {
  margin-right: 15px;
}

.video-description {
  color: #303133;
  line-height: 1.6;
  margin-bottom: 20px;
}

.video-player-container {
  width: 100%;
  margin-bottom: 10px;
  background-color: #000;
}

.video-player {
  width: 100%;
  max-height: 60vh;
}

.video-progress {
  margin-bottom: 20px;
}

.video-notes {
  margin-top: 30px;
}

.notes-actions {
  margin-top: 10px;
  text-align: right;
}

.no-video {
  text-align: center;
  padding: 50px 0;
}

.related-videos {
  margin-bottom: 20px;
}

.related-video-item {
  cursor: pointer;
  margin-bottom: 15px;
  transition: all 0.3s;
}

.related-video-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.related-video-thumb {
  height: 120px;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.related-video-thumb i {
  font-size: 48px;
  color: #909399;
}

.related-video-info h4 {
  margin: 0 0 5px 0;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.related-video-info p {
  margin: 0;
  color: #909399;
  font-size: 12px;
}
</style>
